﻿<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
    <script src="../scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../scripts/jquery.tools.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>     
    <script type="text/javascript" src="../Scripts/Full.js"></script> 
    <script src="../scripts/Scrollable.js" type="text/javascript"></script>
    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
    <link rel="Stylesheet" type="text/css" href="../Content/SPG_Scrollable.css" />   
    
    
    <!-- The following script runs when the DOM is ready. The inline code uses a SharePoint feature to ensure -->
    <!-- The SharePoint script file sp.js is loaded and will then execute the sharePointReady() function in App.js -->
    <script type="text/javascript">
        $(document).ready(function () {
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
                sharePointReady().promise().done(function () {
                    $('.thumbnailcontainer .scrollable .items img').first().click();
                    $(".thumbnailcontainer .scrollable").scrollable();
                });
            });
        });
    </script> 
  
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderId="PlaceHolderMain" runat="server">
    <WebPartPages:AllowFraming ID="AllowFraming1" runat="server" />
   
    <div class="starter">
    </div>
    <div class="spotlightcontainer">
        <div id="image_wrap">
            <div class="image_wrap_img">
                <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
                <img src='../Images/blank.gif' />
            </div>
            <div class="image_wrap_details">
                <strong>default strong text here</strong>
                <p>default paragraph here</p>
                <a href="nothing">default hyperlink text here</a>
            </div>
        </div>
        <!-- HTML structures -->
        <div class='thumbnailcontainer'>
            <!-- 'previous page' action -->
            <a class='prev browse left'></a>
            <!-- root element for scrollable --> 
                <div class='scrollable'>
                    <!-- root element for the items -->
                    <div id='itemsDiv' class='items'>

                    </div>
                </div>
            <!-- 'next page' action -->
            <a class='next browse right'></a>
        </div>
    </div>
    <div class='itemshiddencontainer'>

    </div>
</asp:Content>
